<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>手风琴效果</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="price-demo">
      <h1>价格：<span>500</span></h1>
      <button id="btn-price">把价格打下来</button>
    </div>

    <div class="sfq-outer">
      <h1>主要内容:</h1>
      <pre>
          /**
          * 这里最主要的内容是
          * 1. 自定义属性添加 node.setAttribute('status','playing'|'opened'|'closed');
          * 2. 查询打开了的节点 document.querySelector('.sfq-item-title[status=opened]')
          * 3. 根据title节点获取他的兄弟节点 titleNode.nextElementSibling.style.height = val + 'px';
          * 4. 将交互拆分！！！ 拆分成：1. 循环添加点击事件, 2. 打开事件 3. 关闭事件 4. 切换事件(打开和关闭的封装)
          */
               </pre
      >
      <div class="container"></div>
    </div>
  </body>
  <script src="./animate.js"></script>
  <script src="./index.js"></script>
</html>
